<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<u-navbar :title="id?'编辑纪念厅':'创建纪念厅'" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
				:titleStyle="titleStyle"></u-navbar>
			<view class="searchPage">



				<view class="guanmain">

					<view class="inputbox">
						<span>大厅名称 <i style="color: red;">*</i> </span>
						<input v-model="form.hallName" type="text" placeholder="示例值(我的祖先明辉)" />
					</view>
					<view class="inputbox">
						<span>祭奠大厅内容 <i style="color: red;">*</i> </span>
						<input v-model="form.hallRemark" type="text" placeholder="请输入祭奠大厅内容" />
					</view>


					<view class="inputbox" @click="checkdating">
						<span> 祭奠大厅风格 <i style="color: red;">*</i> </span>
						<u-icon name="arrow-right"></u-icon>
						<input @click="checkdating" v-model="form.hallStyleName" disabled type="text" placeholder="请选择" />
						
					</view>

					<view class="inputbox">
						<span>祭奠大厅主题<i style="color: red;">*</i> </span>
						<input v-model="form.hallTheme" type="text" placeholder="示例值(先辈们永垂不朽！)" />
					</view>

					<view class="inputbox" @click="checkmubei">
						<span> 墓碑风格 <i style="color: red;">*</i> </span>
						<u-icon name="arrow-right"></u-icon>
						<input v-model="form.gravestoneStyleName" disabled type="text" placeholder="请选择" />
					</view>
					<view class="inputbox">
						<span>立碑人 <i style="color: red;">*</i> </span>
						<input v-model="form.hallBuilder" type="text" placeholder="请输入立碑人" />
					</view>


					<view class="inputbox">
						<span>逝者姓名 <i style="color: red;">*</i> </span>
						<input v-model="form.realname" type="text" placeholder="请输入逝者姓名" />
					</view>

					<view class="inputbox" @click="selectorVisible = true">
						<span>性别 <i style="color: red;">*</i> </span>
						<u-icon name="arrow-right"></u-icon>
						<input :value="form.sex == 'male'?'男':form.sex == 'female'?'女':''" type="text"
							placeholder="请选择" />
					</view>
					<view class="inputbox" @click="dateVisible1 = true">
						<span> 出生年月 </span>
						<u-icon name="arrow-right"></u-icon>
						<input v-model="form.birthday" disabled type="text" placeholder="请选择" />
						
					</view>

					<view class="inputbox">
						<span>出生地 </span>
						<input v-model="form.birthplace" type="text" placeholder="请输入出生地" />
					</view>


					<view class="inputbox" @click="dateVisible2 = true">
						<span> 去世时间 <i style="color: red;">*</i> </span>
						<u-icon name="arrow-right"></u-icon>
						<input v-model="form.passDate" disabled type="text" placeholder="请选择" />
					</view>

					<view class="inputbox">
						<span> 安息地</span>
						<input v-model="form.passPlace" type="text" placeholder="请输入安息地" />
					</view>

					<view class="inputbox" style="height: 270rpx;">
						<span>逝者照片 </span>
						<view class="imgList">
							<view class="list nobg" v-if="form.avatar" @click="viewImg()">
								<image :src="form.avatar" class="fileImg" mode="aspectFill"></image>
							</view>
							<view class="" v-else>该家庭成员未上传头像，请在家庭中上传后再创建纪念厅</view>

							<!-- 占位 -->
							<div class="list zhanwei" v-for="index in 4" :key="index"></div>
						</view>
					</view>




				</view>
				<view class="create" @click="submit">
					提交
				</view>

				<view class="" style="height: 120rpx;">

				</view>

			</view>
		</view>


		<w-compress ref='wCompress' />

		<w-picker :visible.sync="dateVisible1" mode="date" startYear="1900" endYear="2029" :current="false" fields="day"
			@confirm="onConfirm($event,'date1')" ref="date1"></w-picker>

		<w-picker :visible.sync="dateVisible2" mode="date" startYear="1900" endYear="2029" :current="false" fields="day"
			@confirm="onConfirm2($event,'date2')" ref="date2"></w-picker>

		<w-picker :visible.sync="selectorVisible" mode="selector" default-type="name" :default-props="defaultProps"
			:options="selectorList" @confirm="onConfirm3($event,'selector')" ref="selector"></w-picker>
	</view>

</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import minxins from '../../common/upload.js';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	export default {
		mixins: [minxins],
		components: {
			WCompress,
			avatar
		},
		data() {
			return {
				dateVisible1: false,
				dateVisible2: false,
				selectorVisible: false,
				id: '',
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				defaultProps: {
					label: "name",
					value: "id"
				},
				selectorList: [{
					name: "男",
					id: "male"
				}, {
					name: "女",
					id: "female"
				}],

				checkGuan: {
					docId: '',
					styleImageUrl: '',
					styleName: '',
				},
				form: {
					avatar: '',
					birthday: '',
					birthplace: '',
					gravestoneStyleImageUrl: '',
					gravestoneStyleName: '',
					hallBuilder: '',
					hallName: '',
					hallRemark: '',
					hallStyleImageUrl: '',
					hallStyleName: '',
					hallTheme: '',
					passDate: '',
					passPlace: '',
					realname: '',
					remark: '',
					sex: '',
					familyMemberId: '',
					museumId: '',
					familyId: '',
				},
				hallId: '',
				checkedData: {},
				iSbox: {
					width: '400rpx',
					height: '400rpx'
				}
			};
		},
		onLoad(e) {
			// 这个id是 大厅表的id

			if (e.id) {
				this.form.museumId = this.id = e.id
				this.getInfo()
			}

			if (e.userid) {
				this.form.familyMemberId = e.userid
			}

			if (e.familyId) {
				this.form.familyId = e.familyId
			}

			if (e.museumId) {
				this.form.museumId = e.museumId
			}
			if (e.hallId) {
				this.hallId = e.hallId
			}

			if (e.checkedData) {
				this.checkedData = JSON.parse(e.checkedData)
				this.form.avatar = this.checkedData.avatar ? this.checkedData.avatar : ''
				this.form.realname = this.checkedData.realname ? this.checkedData.realname : ''
				this.form.birthplace = this.checkedData.birthplace ? this.checkedData.birthplace : ''
				this.form.sex = this.checkedData.sex ? this.checkedData.sex : ''
				this.form.passDate = this.checkedData.passDate ? this.checkedData.passDate : ''
				this.form.hallName = this.form.realname ? '纪念' + this.form.realname : ''
				this.form.birthday = this.checkedData.birthday ? this.checkedData.birthday : ''
				this.form.hallRemark = this.checkedData.remark ? this.checkedData.remark : ''
				console.log('checkedData', this.checkedData)
				console.log(this.form)
			}

			uni.$on('checkmubei', (data) => {
				this.form.gravestoneStyleName = data.styleName
				this.form.gravestoneStyleImageUrl = data.styleImageUrl
			})
			uni.$on('checkdating', (data) => {
				this.form.hallStyleName = data.styleName
				this.form.hallStyleImageUrl = data.styleImageUrl
			})

		},
		methods: {
			checkmubei() {
				uni.navigateTo({
					url: '/pagesobit/obit/mubei'
				})
			},
			checkdating() {
				uni.navigateTo({
					url: '/pagesobit/obit/dating'
				})
			},
			onConfirm(e) {
				console.log(e)
				this.form.birthday = e.result
			},
			onConfirm2(e) {
				console.log(e)
				this.form.passDate = e.result
			},
			onConfirm3(e) {
				console.log(e)
				this.form.sex = e.value
			},
			delImg() {
				this.form.avatar = '';
			},
			viewImg() {
				uni.previewImage({
					urls: [this.form.avatar],
					current: 0
				});
			},
			chooseImage(e) {

				var fileName = Date.now() + '_' + Math.round(Math.random() * 100000000) + '.' + e.path.substring(e.path
					.lastIndexOf('.') + 1)

				var familyId = uni.getStorageSync('familyId') ? uni
					.getStorageSync('familyId')[0] : ''

				this.uploadUserImage(e.path, 'image', fileName, familyId, (
					imgUrl) => {
					this.form.avatar = imgUrl
					this.$forceUpdate()
				})


				// uni.chooseImage({
				// 	count: 1,
				// 	success: res => {

				// 		this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
				// 			res2.forEach((item, index) => {
				// 				var fileName = Date.now() + '_' + Math.round(Math.random() *
				// 					100000000) + '.' + item.substring(item.lastIndexOf(
				// 					'.') + 1)

				// 				var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?
				// 					uni.getStorageSync('maxImageMegBytes') : 20

				// 				var resSize = res.tempFiles[index].size;
				// 				if (resSize > maxImageMegBytes * 1024 * 1024) {
				// 					uni.showToast({
				// 						title: `大小不能超过${maxImageMegBytes}MB`,
				// 						icon: 'none'
				// 					});
				// 					return
				// 				}

				// 				var familyId = uni.getStorageSync('familyId') ? uni
				// 					.getStorageSync('familyId')[0] : ''

				// 				this.uploadUserImage(item, 'image', fileName, familyId, (
				// 					imgUrl) => {
				// 					this.form.avatar = imgUrl;
				// 				})
				// 			})
				// 		})
				// 	},
				// 	fail: err => {
				// 		console.log(err)
				// 	}
				// })
			},
			getInfo() {
				let data = {
					hallId: this.id
				}
				this.$api.hallgetHall(data).then(res => {
					this.form = res.hallDTO
					// this.checkGuan.styleName = this.form.museumStyleName
					// this.checkGuan.styleImageUrl = this.form.museumStyleImageUrl
				})
			},
			toCreate() {
				uni.navigateTo({
					url: '/pagesobit/obit/create'
				})
			},
			changeGuan(index) {
				this.guanIndex = index
			},

			checkguan() {
				uni.navigateTo({
					url: '/pagesobit/obit/jinianguan'
				})
			},
			submit() {
				if (this.form.hallName == '') {
					return this.$Show.show('大厅名称不能为空')
				}

				if (this.form.hallRemark == '') {
					return this.$Show.show('祭奠大厅内容不能为空')
				}

				if (this.form.hallStyleName == '') {
					return this.$Show.show('请选择祭奠大厅风格')
				}

				if (this.form.hallTheme == '') {
					return this.$Show.show('祭奠大厅主题不能为空')
				}

				if (this.form.gravestoneStyleName == '') {
					return this.$Show.show('墓碑风格不能为空')
				}

				if (this.form.hallBuilder == '') {
					return this.$Show.show('立碑人不能为空')
				}


				if (this.form.realname == '') {
					return this.$Show.show('逝者姓名不能为空')
				}


				if (this.form.sex == '') {
					return this.$Show.show('性别不能为空')
				}


				if (this.form.passDate == '') {
					return this.$Show.show('去世时间不能为空')
				}

				if (this.form.avatar == '') {
					return this.$Show.show('该家庭成员未上传头像，请在家庭中上传后再创建纪念厅')
				}

				if (this.id) {
					this.form.hallId = this.id
					this.$api.hallupdateHall(this.form).then(res => {
						this.$Show.successJump('修改成功')
					})
				} else {
					this.$api.hallinsertHall(this.form).then(res => {
						this.$Show.show('创建成功')
						setTimeout(() => {
							uni.redirectTo({
								url: `/pagesobit/obit/ting?id=${this.form.museumId}&docId=${this.form.familyId}`
							})
						}, 2000)
					}).catch((e)=>{
						console.log('exception hallinsertHall',e);
						this.$Show.show(e);
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					})
				}
			}
		}
	};
</script>


<style lang="scss" scoped>
	.imgList {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;

		.list {
			width: 220rpx;
			height: 220rpx;
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			justify-content: center;
			flex-direction: column;
			border-radius: 5rpx;
			margin-bottom: 20rpx;
			position: relative;

			.delImg {
				font-size: 42rpx;
				position: absolute;
				right: 3px;
				top: 3px;
				color: #fff !important;
				z-index: 10;
			}

			view {
				font-size: 24rpx;
				color: #b7b7b7;
				margin-top: 15rpx;
			}

			.iconfont {
				color: #b7b7b7;
				font-size: 40rpx;
			}

			.fileImg {
				width: 100%;
				height: 100%;
			}
		}

		.nobg {
			background-color: #fff;
		}

		.zhanwei {
			visibility: hidden;
			height: 0;
			margin: 0;
		}
	}

	.tablist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		background-color: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		span {
			width: 33.3%;
			text-align: center;
			border-bottom: 2px solid #fff;
			padding-bottom: 20rpx;
		}

		.active {
			color: #de4849;
			border-color: #de4849;
		}
	}

	.searchPage {
		width: 100%;
		height: 100vh;
		background-size: 100%;
		background-color: #ffffff;
	}

	.create {
		width: 600rpx;
		height: 80rpx;
		background: #de4849;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}

	.guanmain {
		margin-top: 20rpx;
		width: 100%;
		margin: 0 auto;

		.inputbox {
			height: 110rpx;
			cursor: pointer;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 0 20rpx;
			border-bottom: 1px solid #f8f8f8;

			span {
				margin-right: 20rpx;
				white-space: nowrap;
				min-width: 170rpx;
				display: flex;
				font-size: 28rpx;
			}

			input {
				width: 80%;
				font-size: 28rpx;
			}
		}
	}
</style>